<template>
  <DymicForm v-model="data" v-bind="config" @handle="handleClick" />
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue';
import DymicForm from './DymicForm/index.vue';
import certificateFormConfig from '../../config/certificateFormConfig';
const data = reactive({
  appName: ''
});
const config = {
  name: '基本信息',
  labelWidth: '120px',
  actions: [
    { type: 'primary', label: '提交', event: 'onSubmit' },
    { type: '', label: '重置', event: 'onReset' }
  ],
  fields: [
    {
      prop: 'appName',
      label: 'APP名称',
      width: '500px',
      type: 'el-input',
      default: '默认值',
      required: true,
      props: {
        clearable: true,
        placeholder: '请输入app名称'
      }
    },
    {
      prop: 'appCode',
      label: 'APP编码',
      width: '500px',
      type: 'el-input',
      required: true,
      props: {
        clearable: true,
        placeholder: '请输入app编码'
      }
    },
    {
      label: 'app类型',
      prop: 'type',
      required: true,
      type: 'el-checkbox-group',
      options: [
        { label: 'Android', value: 'Android' },
        { label: 'IOS', value: 'IOS' },
        { label: 'Web', value: 'Web' }
      ]
    },
    {
      label: '状态',
      prop: 'switch',
      type: 'el-switch',
      required: true,
      props: {
        activeText: '启用',
        inactiveText: '禁用'
      }
    },
    {
      label: '使用地区',
      prop: 'region',
      type: 'el-select',
      required: true,
      width: '500px',
      options: [
        { label: '北京', value: '1' },
        { label: '上海', value: '2' }
      ]
    },
    {
      prop: 'desc',
      label: '功能描述',
      width: '500px',
      type: 'el-input',
      props: {
        type: 'textarea',
        rows: 4
      }
    },
    {
      label: '使用地区',
      required: true,
      prop: 'resource',
      type: 'el-radio-group',
      options: [
        { label: '国内', value: '1' },
        { label: '港澳台', value: '2' },
        { label: '海外', value: '3' }
      ]
    },
    {
      prop: 'date',
      label: '日期',
      width: '500px',
      type: 'el-date-picker',
      props: {
        type: 'daterange',
        valueFormat: 'YYYY-MM-DD',
        unlinkPanels: true,
        startPlaceholder: '开始日期',
        endPlaceholder: '结束日期'
      }
    },
    {
      type: 'list',
      label: '列表',
      required: true,
      prop: 'userlist',
      width: '1000px',
      props: {
        showBtn: true,
        max: 3,
        min: 1
      },
      children: [
        { label: '名称', prop: 'name', type: 'el-input', required: true },
        { label: '性别', prop: 'sex', type: 'el-input' },
        { label: '电话', prop: 'phone', type: 'el-input' }
      ]
    },
    {
      prop: 'images',
      label: '图片',
      width: '500px',
      type: 'el-upload',
      props: {}
    }
  ]
};
const actions = {
  onSubmit: async formEle => {
    console.log('submit!', data);
    await formEle.validate();
  },
  onReset: formEle => {
    formEle.resetFields();
  }
};
const handleClick = (event: string, scope) => {
  try {
    actions[event] && actions[event](scope);
  } catch (error) {
    console.log(error);
  }
};
</script>
